import React from 'react';
import { Rnd } from 'react-rnd';
import styles from './page-design.less';
import LeftWrapper from '@/components/page-design/LeftWrapper';
import RightWrapper from '@/components/page-design/RightWrapper';
import businessComponents from '@/components/business';
import _, { times } from 'lodash';
import { connect } from 'umi';

class PageDesign extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
    //console.log(props)
    this.state = {
      components: [],
      activeIndex: -1,
    };
  }
  render() {
    return (
      <div className={styles['page-container']}>
        <div className={styles['left-wrapper']}>
          <LeftWrapper />
        </div>
        <div
          className={styles['center-wrapper']}
          onDrop={(e) => this.onTargetDrop(e)}
          onDragOver={(e) => this.onTargetDragOver(e)}
        >
          {this.generateComponents()}
        </div>
        <div className={styles['right-wrapper']}>
          <RightWrapper />
        </div>
      </div>
    );
  }
  onTargetDrop(e: any) {
    e.preventDefault();
    const name = e.dataTransfer.getData('text/plain');
    //console.log(e);
    const old = this.state.components;
    old.push({
      name: name,
      position: {
        x: e.clientX - window.innerWidth * 0.2,
        y: e.clientY,
      },
      size: {
        w: window.innerWidth * 0.5,
        h: 60,
      },
    });
    this.setState({
      components: old,
    });
  }
  onTargetDragOver(e: any) {
    e.preventDefault();
    e.dataTransfer.dropEffect = 'move';
  }
  generateComponents() {
    return this.state.components.map((item: any, index: number) => {
      let component = _.get(businessComponents, item.name);
      return (
        <Rnd
          key={index}
          className={styles['rnd-wrapper']}
          default={{
            x: item.position.x,
            y: item.position.y,
            width: item.size.w,
            height: item.size.h,
          }}
          allowAnyClick={false}
          onClick={(e: any) => this.onClickComponent(item, index)}
          onDragStop={(e: any, data: any) =>
            this.onDragStopComponent(data, index)
          }
          onResizeStop={(e: any, ...data: any) =>
            this.onResizeStopComponent(data, index)
          }
        >
          <component.default className={styles['component']} />
        </Rnd>
      );
    });
  }
  onClickComponent(item: any, index: number) {
    //console.log(item,this.state.components[index]);
    this.props.dispatch({
      type: 'component/setActive',
      payload: this.state.components[index],
    });
    this.setState({
      activeIndex: index,
    });
  }
  onDragStopComponent(data: any, index: number) {
    //console.log(data);
    const old = this.state.components;
    old[index].position.x = data.x;
    old[index].position.y = data.y;
    this.setState({
      components: old,
      activeIndex: index,
    });
  }
  onResizeStopComponent(data: any, index: number) {
    //console.log(data);
    const old = this.state.components;
    old[index].size = {
      w: old[index].size.w + data[2].w,
      h: old[index].size.h + data[2].h,
    };
    this.setState({
      components: old,
      activeIndex: index,
    });
  }
}

export default connect(({ component }: any) => ({
  component,
}))(PageDesign);
